<template>
    <div style="height:100%;width:100%;">
        <el-container style="min-height: 100%;height: 100%; min-height: 100%; position: relative; display: flex;">
            <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);">
                <Aside :is-collapse="isCollapse" :logoTextShow="logoTextShow" />
            </el-aside>

            <el-container>
                <el-header style="background-color: #eeeeee ">
                    <!--传递给其他子级--><!-- 方法一 :collapse="collapse"-->
                    <Header  @asideCollapse="collapse" :collapse-btn-class="collapseBtnClass" :user="user"/>
                </el-header>

                <el-main>
                    <!-- 展示当前路由的子路由  -->
                    <!--自定义方法，子元素触发-->
                    <router-view @refreshUser="getUser"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import Aside from "../components/Aside";
    import Header from "../components/Header";

    export default {
        name: 'ManageView',
        components: {
            Aside, Header
        },
        data() {
            return {
                isCollapse: false,
                sideWidth: 200,
                collapseBtnClass: 'el-icon-s-fold',
                user: {},
                logoTextShow:true,
            }
        },
        created() {
            this.getUser();
        },
        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse;
                if (this.isCollapse) {
                    this.sideWidth = 64;
                    this.collapseBtnClass = 'el-icon-s-unfold';
                    this.logoTextShow = false;
                } else {
                    this.sideWidth = 200;
                    this.collapseBtnClass = 'el-icon-s-fold';
                    this.logoTextShow = true;
                }
            },
            getUser() {
                let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : "";
                this.request.get("/users/username/" + username).then((res) => {
                    this.user = res.data;
                });
            }
        }

    }
</script>